<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <link rel="stylesheet" type="text/css" href="../style/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../style/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../style/animate.min.css" />
    <style>
        body {
            font-size: 14px;
            line-height: 1;
        }

        main {
            padding-top: 75px;
            margin-bottom: 52px;
        }

        #pullrefresh {
            padding-top: 75px;
            margin-bottom: 52px;
        }

        .smallSpeakers {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem;
            width: 95%;
            margin: 0.5rem auto;
            background: url(../img/icons/background1.png);
            background-size: cover;
            border-radius: 0.4rem;
        }

        .speakers-left {
            width: 15%;
            line-height: 2rem;
            text-align: center;
        }

        .speakers-left img {
            width: 2rem;
            height: 2rem;
        }

        .swiper-container {
            width: 85%;
            color: #fff;
            font-size: 0.9rem;
            height: 2rem;
            line-height: 2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .myNav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 95%;
            margin: 0.5rem auto;
        }

        .myNav div {
            width: 47%;
            font-size: 1.1rem;
            font-weight: bold;
            color: #fff;
            padding: 0.5rem;
            border-radius: 0.4rem;
            background: url(../img/icons/background.png);
            background-size: cover;
            box-shadow: 0 0 2px rgba(57,73,171);
        }

        .myNav div img {
            width: 3rem;
            height: 3rem;
            margin-right: 1rem;
            vertical-align: middle;
        }

        .lectureBox .lectureItem {
            width: 95%;
            padding: 0.5rem 1rem;
            margin: 0.5rem auto;
            border-radius: 0.5rem;
            background-color: #fff;
            border-left: 2px solid #3949AB;
        }

        .lectureItem-title {
            text-align: center;
            position: relative;
            padding: 0.5rem;
            border-bottom: 1px dashed #ccc;
        }

        .lectureItem-title img {
            position: absolute;
            top: 0.5rem;
            left: 0;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        .lectureItem-title span {
            font-weight: bold;
            font-size: 1.2rem;
        }

        .lectureItem-body {
            padding: 0.5rem;
            color: #999;
            border-bottom: 1px dashed #ccc;
        }
        .lectureItem-body p {
            width: 100%;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-bottom: 0;
        }
        .lectureItem-bottom {
            padding: 0.5rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px dashed #ccc;
        }
        .lectureItem-bottom span:nth-child(1) {
            color: #3949AB;
            margin-right: 0.5rem;
        }
        .lectureItem-bottom span:nth-child(2) img{
            width: 2rem;
            height: 2rem;
            vertical-align: middle;
            border-radius: 50%;
        }
        .mui-slider .mui-slider-group .mui-slider-item {
            height: 14.3rem;
        }
        .mui-slider-indicator .mui-active.mui-indicator {
            background-color: #3949AB;
        }
        .botBar {
    			position: fixed;
          left: 0;
    			bottom: 0;
    			height: 52px;
    			width: 100%;
    			padding: 0.3rem;
          z-index: 22;
    			box-sizing: border-box;
    			background-color: #f7f7f7;
    		}

    		.botItem {
    			float: left;
    			text-align: center;
    			width: 25%;
    			display: flex;
    			flex-direction: column;
    			justify-content: space-between;
    			align-items: center;
    			font-size: 12px;
    		}

    		.botItem img {
    			width: 25px;
    			height: 25px;
    		}

    		.botItem-active {
    			color: #3949AB;
    		}
    </style>
</head>

<body>
    <header>首页</header>
    <main>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
              <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                  <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                      <img src="../img/banner/banner4.png">
                    </a>
                  </div>
                  <div class="mui-slider-item">
                    <a href="#">
                      <img src="../img/banner/banner1.png">
                    </a>
                  </div>
                  <div class="mui-slider-item">
                    <a href="#">
                      <img src="../img/banner/banner2.png">
                    </a>
                  </div>
                  <div class="mui-slider-item">
                    <a href="#">
                      <img src="../img/banner/banner3.png">
                    </a>
                  </div>
                  <div class="mui-slider-item">
                    <a href="#">
                      <img src="../img/banner/banner4.png">
                    </a>
                  </div>
                  <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                      <img src="../img/banner/banner1.png">
                    </a>
                  </div>
                </div>
                <div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
								</div>
              </div>

                <div class="smallSpeakers">
                    <div class="speakers-left">
                        <img src="../img/icons/speak.png" alt="">
                    </div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">app严厉禁止发布任何金钱交易活动</div>
                            <div class="swiper-slide">收集业界各大热门区块链比特币专题活动</div>
                            <div class="swiper-slide">更多讲座会议请关注我们</div>
                        </div>
                    </div>
                </div>

                <div class="myNav">
                    <div id="issue">
                        <img src="../img/icons/nav1.png" alt="">发布讲座
                    </div>
                    <div id="added">
                        <img src="../img/icons/nav2.png" alt="">已加入的
                    </div>
                </div>

                <div class="lectureBox">

                </div>
            </div>
        </div>
    </main>
    <nav class="botBar" id="botBar">
  		<li class="botItem botItem-active" page-address="btb-home.html">
  			<img src="../img/bot/bot0.png" alt="">
  			<span>讲座</span>
  		</li>
  		<li class="botItem" page-address="btb-aq.html">
  			<img src="../img/bot/bot1.png" alt="">
  			<span>答疑</span>
  		</li>
  		<li class="botItem" page-address="btb-quotes.html">
  			<img src="../img/bot/bot2.png" alt="">
  			<span>行情</span>
  		</li>
  		<li class="botItem" page-address="btb-my.html">
  			<img src="../img/bot/bot3.png" alt="">
  			<span>我的</span>
  		</li>
  	</nav>
</body>
<script type="text/template" id="lecture">
  {{~it.items:value:index}}
  <div class="lectureItem animated bounceInLeft" data-id="{{=value.id}}">
      <div class="lectureItem-title">
          <img src="../img/icons/badges.png" alt="">
          <span>【讲座】{{=value.lecture_name}}</span>
      </div>
      <div class="lectureItem-body">
          <p>{{=value.lecture_txt}}</p>
      </div>
      <div class="lectureItem-bottom">
          <span>主讲人:</span>
          <span>
              <img src="../img/icons/teacher.png" alt="">
              {{=value.lecture_teacher}}
          </span>
      </div>
  </div>
  {{~}}
</script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript" src="../js/rend.js"></script>
<script type="text/javascript">
    apiready = function() {
      $("body").hide();
      api.setStatusBarStyle({
          style: 'dark',
      });
      pullupRefresh();
      api.addEventListener({
          name: 'loading'
      }, function(ret, err){
          pullupRefresh();
      });

    };

    mui("#pullrefresh").pullRefresh({
        down: {
            callback: pulldownRefresh
        },
        up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        },
    })

    function pulldownRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        }, 1500);
    }

    var count = 0;
    var pagesize = 3;

    function pullupRefresh() {
        api.ajax({
            url: 'http://114.116.243.15/newbtb/appinfo/queryActivity.lecture',
            method: 'post',
            data: {
                body: {}
            }
        },function(ret, err){
            if (ret) {
                if(ret.btb_data.total > 0) {
                  count++;
                  var temp = [];
                  var data = ret.btb_data.records;
                  var lectureBox = $('.lectureBox');
                  if ((count - 1) * pagesize > data.length) {
                      mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                      return
                  }
                  for (var i = (count - 1) * pagesize; i < count * pagesize; i++) {
                      if (!data[i]) {
                          break;
                      } else {
                          temp.push(data[i]);
                      }
                  }
                  lectureBox.append(btbRender('lecture', temp));
                  setTimeout(()=>{
                    api.closeWin({
                        name: 'nonet'
                    });
                  },1000)
                  $("body").show();
                  $('.lectureBox').on("tap", ".lectureItem", function() {
                    api.openWin({
                        name: 'lecture',
                        url: './btb-lecture.html',
                        pageParam: {
                            id: $(this).attr('data-id')
                        }
                    });
                  })
                  mui('#pullrefresh').pullRefresh().endPullupToRefresh();
                }
            }
            else {
              setTimeout(()=>{
                pullupRefresh();
              },1000)
             api.openWin({
                 name: 'nonet',
                 url: './nonet.html',
                 slidBackEnabled: false,
                 animation: {
                     type: 'none'
                 }
             });
            return;
            }
        });
    }

    $('.myNav').on("tap", "#issue", function() {
      if ($api.getStorage('username')) {
          api.openWin({
              name: 'issue',
              url: './btb-issue.html',
          });
      } else {
          api.openWin({
              name: 'login',
              url: './btb-login.html',
          });
      }
    })

    $('.myNav').on("tap", "#added", function() {
      if ($api.getStorage('username')) {
        api.openWin({
            name: 'added',
            url: './btb-added.html',
        });
      } else {
          api.openWin({
              name: 'login',
              url: './btb-login.html',
          });
      }
    })

    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: true,
        autoplay: true,
        spaceBetween: 0,
        effect: 'slide',
    });

    $('.botItem').click(function() {
  		var bottomH = $api.offset($api.byId('botBar'));
  		var page_path = $(this).attr('page-address');
  		var index = $('.botItem').index(this);
  		var $img = $(this).find('img');
  		$(this).find('img').attr('src', '../img/bot/botlight' + index + '.png');
  		$(this).siblings().each(function() {
  			var $imgs = $(this).find('img');
  			var indexs = $('.botItem').index(this);
  			$imgs.attr('src', '../img/bot/bot' + indexs + '.png');
  		})
  		$(this).addClass('botItem-active  animated rubberBand').siblings().removeClass('botItem-active animated rubberBand');
  		if (page_path) {
  			api.openFrame({
  				name: page_path.split('.')[0],
  				url: page_path,
  				bounces: false,
  				rect: {
  					x: 0,
  					y: 0,
  					w: 'auto',
  					h: api.frameHeight - bottomH.h
  				}
  			});
  		}

      if(page_path == 'btb-home.html') {
        api.openFrame({
          name: page_path.split('.')[0],
          url: page_path,
          bounces: false,
          rect: {
            x: 0,
            y: 0,
            w: 'auto',
            h: api.frameHeight
          }
        });
      }
  	})
</script>

</html>
